<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评估准则构建展示</title>
    <meta name="description" content="评估准则构建软件">
    <!-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- 字体CSS -->
    <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/bootstrap-select/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <!-- 自定义样式 -->
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/css/norm/index.css">
    <style>


    </style>
</head>

<body class="adminbody">
<div id="main">
    <!-- 头部导航 -->
    <div class="headerbar">
        <!-- LOGO -->
        <div class="headerbar-left">
            <a href="index.html" class="logo">
                <!--					<img alt="Logo" src="assets/images/logo.png" />-->
                <span>评估准则构建软件</span>
            </a>
        </div>

        <nav class="navbar-custom">
            <ul class="list-inline float-right mb-0">
                <li class="list-inline-item dropdown notif">
                    <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
                       aria-haspopup="false" aria-expanded="false">
                        <i class="fa fa-fw fa-bell-o"></i><span class="notif-bullet"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg">
                        <!-- item-->
                        <div class="dropdown-item noti-title">
                            <h5><small><span class="label label-danger pull-xs-right">1</span>消息提醒</small></h5>
                        </div>
                        <!-- item-->
                        <a href="#" class="dropdown-item notify-item">
                            <div class="notify-icon bg-faded">
                                <img src="assets/images/avatars/avatar2.png" alt="img"
                                     class="rounded-circle img-fluid">
                            </div>
                            <p class="notify-details">
                                <b>Admin</b>
                                <span>用户信息注册成功</span>
                                <small class="text-muted">3分钟前</small>
                            </p>
                        </a>
                        <!-- All-->
                        <a href="#" class="dropdown-item notify-item notify-all">
                            查看所有消息
                        </a>

                    </div>
                </li>

                <li class="list-inline-item dropdown notif">
                    <a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
                       aria-haspopup="false" aria-expanded="false">
                        <img src="assets/images/avatar.jpg" alt="Profile image" class="avatar-rounded">
                    </a>
                    <div class="dropdown-menu dropdown-menu-right profile-dropdown ">
                        <!-- item-->
                        <div class="dropdown-item noti-title">
                            <h5 class="text-overflow"><small>Hello, admin</small> </h5>
                        </div>

                        <!-- item-->
                        <a href="pro-profile.html" class="dropdown-item notify-item">
                            <i class="fa fa-user"></i> <span>个人中心</span>
                        </a>

                        <!-- item-->
                        <a href="#" class="dropdown-item notify-item">
                            <i class="fa fa-power-off"></i> <span>退出</span>
                        </a>
                    </div>
                </li>

            </ul>

            <ul class="list-inline menu-left mb-0">
                <li class="float-left">
                    <button class="button-menu-mobile open-left">
                        <i class="fa fa-fw fa-bars"></i>
                    </button>
                </li>
            </ul>

        </nav>

    </div>
    <!-- 头部导航End -->
    <!-- 左侧导航开始 start-->
    <div class="left main-sidebar">
        <div class="sidebar-inner leftscroll">
            <div id="sidebar-menu">
                <ul>
                    <li class="submenu">
                        <a href="index.html" class="active"><i class="fa fa-fw fa-home"></i><span>评估准则首页</span> </a>
                    </li>
                    <li class="submenu">
                        <a href="normCreate.html" ><i class="fa fa-fw fa-check-circle-o"></i><span>评估准则生成</span> </a>
                    </li>
                    <li class="submenu">
                        <a href="normEdit.html" ><i class="fa fa-fw fa-pencil-square-o"></i><span>评估准则编辑</span> </a>
                    </li>
                    <li class="submenu">
                        <a href="normEdit.html"><i class="fa fa-fw fa-bars"></i><span>评估准则展示</span> </a>
                    </li>
                    <li class="submenu">
                        <a href="normTemplete.html"><i class="fa fa-fw fa-file-text-o"></i><span>评估准则模板</span> </a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>

        </div>
    </div>
    <!-- End 左侧导航 -->
    <div class="content-page">
            <div id="index-main">
                <div class="index-content">
                    <div class="layui-row">
                        <div class="layui-col-xs5">
                            <div id="chart1"></div>
                        </div>
                        <div class="layui-col-xs7">
                            <div id="chart2">
                                <div class="layui-row">
                                    <div class="layui-col-xs4">
                                        <div id="chart2-1"></div>
                                    </div>
                                    <div class="layui-col-xs4">
                                        <div id="chart2-2"></div>
                                    </div>
                                    <div class="layui-col-xs4">
                                        <div id="chart2-3"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs3">
                            <div id="chart3"></div>
                        </div>
                        <div class="layui-col-xs3">
                            <div id="chart4"></div>
                        </div>
                        <div class="layui-col-xs6">
                            <div id="chart5"></div>
                        </div>
                    </div>
                </div>
            </div>

    </div>
</div>


<!-- 上述js路径需要改成你本地的 -->
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>


<!-- App js -->
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/pikeadmin.js"></script>
<script src="./assets/layui/layui.js"></script>
<script src="./assets/js/echarts.min.js"></script>

<script>
    var color=["#2ec7c9",
        "#b6a2de",
        "#5ab1ef",
        "#ffb980",
        "#d87a80",
        "#8d98b3",
        "#e5cf0d",
        "#97b552",
        "#95706d",
        "#dc69aa",
        "#07a2a4",
        "#9a7fd1",
        "#588dd5",
        "#f5994e",
        "#c05050",
        "#59678c",
        "#c9ab00",
        "#7eb00a",
        "#6f5553",
        "#c14089"]
    createLine();

    createPie1();
    createPie2();
    createBar();
    //折线图
    function createLine() {
        var myChart = echarts.init(document.getElementById('chart1'));
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
            //请求地址
            url : "/bs/standardManage/getDataLine",
            //数据
            data:'',
            //请求成功
            success : function(res) {
                if (res.status==0) {
                    var legendArr=[],seriesData=[];
                    var data=res.data;
                    for (let i of data.lists){
                        seriesData.push({
                            name: i.name,
                            type: 'line',
                            data: i.yData
                        });
                        legendArr.push(i.name);
                    }
                    var option = {
                        title: {
                            text:data.title
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:legendArr
                        },
                        color,
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.xData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series:seriesData
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.error(e.status);
                console.error(e.responseText);
            }
        });
    }
    $.ajax({
        //请求方式
        type : "POST",
        //请求的媒体类型
        contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
        //请求地址
        url : "/bs/standardManage/getDataByType",
        //数据
        data:'',
        //请求成功
        success : function(res) {
            var legendArr=[],dataArr=[];
            if (res.status==0){
                createCircle(res.data);
            }
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            console.error(e.status);
            console.error(e.responseText);
        }
    });
    //生成环图数据
    function circleArr(list,name) {
        var arr=[];
        for (let k of list[name]){
            arr.push({value:k.number,name:k.name})
        }
        return arr;
    }
    //环图
    function createCircle(data) {
        var title=data.title,list=data.list;
        var myChart1 = echarts.init(document.getElementById('chart2-1'));
        var myChart2 = echarts.init(document.getElementById('chart2-2'));
        var myChart3 = echarts.init(document.getElementById('chart2-3'));
        var option1 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: [],
                show:false
            },
            color,
            series: [
                {
                    name:title ,
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            // position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data:circleArr(list,'category0')
                }
            ]
        };

        var option2 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            title:{
                text:title
            },
            legend: {
                orient: 'vertical',
                left: 10,
                top:20,
                data: ['准则','模板']
            },
            color,
            series: [
                {
                    name:title ,
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: circleArr(list,'category1')
                }
            ]
        };

        var option3 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: [],
                show:false
            },
            color,
            series: [
                {
                    name: title,
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:circleArr(list,'category2')
                }
            ]
        };

        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    }
//    饼图1
    function createPie1() {
        var myChart = echarts.init(document.getElementById('chart3'));
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
            //请求地址
            url : "/bs/standardManage/getStandardByMon",
            //数据
            data:'',
            //请求成功
            success : function(res) {
                var legendArr=[],dataArr=[];
                if (res.status==0){
                    for (let i of res.data.list){
                        legendArr.push(i.category);
                        dataArr.push({value:i.number,name:i.category});
                    }
                    var option = {
                        title: {
                            text: res.data.title,
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            top:26,
                            data: legendArr
                        },
                        color,
                        series: [
                            {
                                name: '准则生成量',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: dataArr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.error(e.status);
                console.error(e.responseText);
            }
        });
    }
    //    饼图2
    function createPie2() {
        var myChart = echarts.init(document.getElementById('chart4'));
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
            //请求地址
            url : "/bs/modelManage/getModelByMon",
            //数据
            data:'',
            //请求成功
            success : function(res) {
                var legendArr=[],dataArr=[];
                if (res.status==0){
                    for (let i of res.data.list){
                        legendArr.push(i.category);
                        dataArr.push({value:i.number,name:i.category});
                    }
                    var option = {
                        title: {
                            text: res.data.title,
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            top:26,
                            data: legendArr
                        },
                        color,
                        series: [
                            {
                                name: '模板生成量',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: dataArr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.error(e.status);
                console.error(e.responseText);
            }
        });
    }
//    柱图
    function createBar() {
        var myChart = echarts.init(document.getElementById('chart5'));
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
            //请求地址
            url : "/bs/standardManage/getData",
            //数据
            data:'',
            //请求成功
            success : function(res) {
                if (res.status==0) {
                    var legendArr=[],seriesData=[];
                    var data=res.data;
                    for (let i of data.lists){
                        seriesData.push({
                            name: i.name,
                            type: 'bar',
                            data: i.yData,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        });
                        legendArr.push(i.name);
                    }
                    var option = {
                        title: {
                            text: data.title,
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:legendArr
                        },
                        color,
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: data.xData
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series:seriesData
                    };
                    myChart.setOption(option);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.error(e.status);
                console.error(e.responseText);
            }
        });

    }
</script>
</body>

</html>